<template>
  <div class="app-container">
    <!--  -->
    <div class="flex justify-between align-center" style="flex: 0 0 52px;background-color: #fff;padding: 0 20px;">
      <ul class="tabs">
        <li :class="{ 'active': queryParams.active == 1}" @click="queryParams.active = 1">全部隧道</li>
        <li :class="{ 'active': queryParams.active == 2 }" @click="queryParams.active = 2">左隧道群</li>
        <li :class="{ 'active': queryParams.active == 3 }" @click="queryParams.active = 3">右隧道群</li>
      </ul>
      <!-- <el-date-picker
        v-model="queryParams.date"
        type="date"
        format="yyyy-MM-dd"
        placeholder="年/月/日"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="left"
        size="small"
        @change="datePickerChange"
      /> -->
    </div>
    <div style="margin-top:1.0417vw;display: grid;grid-template-columns: 1fr 1fr 1fr 1.8fr;grid-template-rows:14.0625vw 14.0625vw;column-gap:0.8333vw;row-gap: 0.8333vw;">
      <!-- <div style="flex: 1; display: grid;grid-template-columns: 1fr 1fr 1fr 1.8fr;grid-template-rows:14.0625vw 14.0625vw;column-gap:0.8333vw;row-gap: 0.8333vw;"> -->
      <div class="panel-1" style="position: relative;">
        <div class="title">车流量看板</div>
        <div style="font-size: 30px;margin-top:14px;">8,846<span style="font-size: 14px;margin-left: 8px;">辆</span></div>
        <MonthlyChart :data="statistic7" style="position:absolute;left: 0;top: 0;" />
      </div>
      <AlarmCount :query-params="queryParams" />
      <!-- <div class="panel-1 flex flex-direction">
        <div class="title">今日隧道状况分布</div>
         background-image: linear-gradient(194deg, #FAD77D 0%, #F7A34A 51%, #F58E1D 100%);
        <div class="flex-sub" style="margin-top: 0.8333vw;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);column-gap:0.8333vw;row-gap: 0.8333vw;color: #F5962F;">
          <div style="position: relative; padding: 0.7813vw; border-radius: 9px;background-color:rgba(250, 215, 125, 0.1);">
            <div style="font-size: 0.7292vw;">事故预警</div>
            <div style="font-size: 1.6667vw;font-family: Helvetica;">18</div>
            <img style="position: absolute;top: 0.7813vw; right: 0.9896vw;width: 1.6667vw;height: 1.5625vw;" src="~@/assets/images/statistics/sgyj.png">
          </div>
          <div style="position: relative;padding: 0.7813vw; border-radius: 9px;background-color: rgba(250, 215, 125, 0.1);">
            <div style="font-size: 0.7292vw;">故障预警</div>
            <div style="font-size: 1.6667vw;font-family: Helvetica;">18</div>
            <img style="position: absolute;top: 0.7813vw; right: 0.9896vw;width: 1.6667vw;height: 1.5625vw;" src="~@/assets/images/statistics/gzyj.png">
          </div>
          <div style="position: relative;padding: 0.7813vw; border-radius: 9px;background-color: rgba(250, 215, 125, 0.1);">
            <div style="font-size: 0.7292vw;">火灾预警</div>
            <div style="font-size: 1.6667vw;font-family: Helvetica;">18</div>
            <img style="position: absolute;top: 0.7813vw; right: 0.9896vw;width: 1.6667vw;height: 1.5625vw;" src="~@/assets/images/statistics/hzyj.png">
          </div>
          <div style="position: relative;padding: 0.7813vw; border-radius: 9px;background-color: rgba(250, 215, 125, 0.1);">
            <div style="font-size: 0.7292vw;">故障处置</div>
            <div style="font-size: 1.6667vw;font-family: Helvetica;">18</div>
            <img style="position: absolute;top: 0.7813vw; right: 0.9896vw;width: 1.6667vw;height: 1.5625vw;" src="~@/assets/images/statistics/yacz.png">
          </div>
        </div>
      </div>-->
      <CameraVideo ref="CameraVideo1" title="隧道入口视频" index="1" />
      <co2 />
      <div class="panel-1 flex flex-direction">
        <div class="title">环境看板</div>
        <div class="flex-sub" style="margin-top: 0.8333vw;display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows:repeat(2, 1fr);">
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_wd.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">温度</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">31.68</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_sd.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">湿度</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">41.68</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_fl.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">风力</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">东南风</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_fy.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">风压</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">2m/s</div>
          </div>
          <!--  -->
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_yqnd.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">氧气浓度</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">20.76</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_ywd.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">烟雾度</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">0</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_fs.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">风速</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">0</div>
          </div>
          <div style="text-align: center;">
            <img src="~@/assets/images/statistics/icon_gz.png" style="height:1.4583vw;">
            <div style="font-size: 0.625vw;color: rgba(0, 0, 0, 0.65);">光照</div>
            <div class="text-nowrap" style="font-size: 0.8333vw;">0</div>
          </div>
        </div>
      </div>
      <div class="panel-1">
        <div class="title">照明看板</div>
        <div style="font-size: 0.7292vw;color: rgba(0,0,0,0.65);line-height: 1;">
          <div style="margin:1.0417vw 0 0.7292vw 0;">当前照明模式：云天照明</div>
          <div>洞口亮度：2600cd/㎡</div>
        </div>
        <div class="title" style="margin-top:2.0833vw;">风机看板</div>
        <div style="font-size: 0.7292vw;color: rgba(0,0,0,0.65);line-height: 1;">
          <div style="margin:1.0417vw 0 0.7292vw 0;">风机运行模式：</div>
          <div>运行：{{ deviceCount['1'].total }}台<span style="padding:0 20px;" />停止：{{ deviceCount['1'].fault }}台</div>
        </div>
      </div>
      <CameraVideo ref="CameraVideo2" title="隧道出口视频" index="2" />
      <FjFrequency />
    </div>
    <div class="panel-3" style="margin-top:0.8333vw;">
      <div class="title">
        <div>设备状态看板</div>
      </div>
      <div class="panel-body">
        <DeviceCount title="全部设备" :type="DEVICE_TYPES.QB" :info="deviceCount[DEVICE_TYPES.QB]" />
        <DeviceCount title="火灾报警器" :type="DEVICE_TYPES.HZBJ" :info="deviceCount[DEVICE_TYPES.HZBJ]" />
        <DeviceCount title="照明灯" :type="DEVICE_TYPES.ZMD" :info="deviceCount[DEVICE_TYPES.ZMD]" />
        <DeviceCount title="UPS" :type="DEVICE_TYPES.UPS" :info="deviceCount[DEVICE_TYPES.UPS]" />
        <DeviceCount title="指示灯" :type="DEVICE_TYPES.ZSD" :info="deviceCount[DEVICE_TYPES.ZSD]" />
        <DeviceCount title="风机" :type="DEVICE_TYPES.FJ" :info="deviceCount[DEVICE_TYPES.FJ]" />
        <DeviceCount title="摄像机" :type="DEVICE_TYPES.SXJ" :info="deviceCount[DEVICE_TYPES.SXJ]" />
        <!-- <DeviceCount title="防火卷闸门" :type="DEVICE_TYPES.FHJZM" :info="deviceCount[DEVICE_TYPES.FHJZM]" /> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_qb.png">
          <div class="center">
            <div>全部设备</div>
            <div class="num">{{ deviceCount['0'].total }}/总数</div>
          </div>
          <div class="right">
            <div>正常：{{ deviceCount[0].normal }}</div>
            <div>故障：{{ deviceCount[0].fault }}</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_hzbjq.png">
          <div class="center">
            <div>火灾报警器</div>
            <div class="num">--/总数</div>
          </div>
          <div class="right">
            <div>正常：--</div>
            <div>故障：--</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_zmd.png">
          <div class="center">
            <div>照明灯</div>
            <div class="num">30/总数</div>
          </div>
          <div class="right">
            <div>正常：30</div>
            <div>故障：0</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_UPS.png">
          <div class="center">
            <div>UPS</div>
            <div class="num">30/总数</div>
          </div>
          <div class="right">
            <div>30</div>
            <div>故障：0</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_xfb.png">
          <div class="center">
            <div>消防水泵</div>
            <div class="num">30/总数</div>
          </div>
          <div class="right">
            <div>正常：30</div>
            <div>故障：0</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_fj.png">
          <div class="center">
            <div>风机</div>
            <div class="num">{{ deviceCount['1'].total }}/总数</div>
          </div>
          <div class="right">
            <div>正常：{{ deviceCount['1'].normal }}</div>
            <div>故障：{{ deviceCount['1'].fault }}</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_sxj.png">
          <div class="center">
            <div>摄像机</div>
            <div class="num">30/总数</div>
          </div>
          <div class="right">
            <div>正常：30</div>
            <div>故障：0</div>
          </div>
        </div> -->
        <!-- <div>
          <img src="~@/assets/images/statistics/icon_fhjzm.png">
          <div class="center">
            <div>防火卷闸门</div>
            <div class="num">30/总数</div>
          </div>
          <div class="right">
            <div>正常：30</div>
            <div>故障：0</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import ScrollNum from './components/ScrollNum.vue'
// import CostChart from './components/CostChart.vue'
// import ProgressChart from './components/ProgressChart.vue'
// import BarChart from './components/BarChart.vue'
// import Top10Chart from './components/Top10Chart.vue'
import MonthlyChart from './components/MonthlyChart.vue'
// import LineChart from './components/LineChart.vue'

import co2 from './components/co2.vue'
import FjFrequency from './components/FjFrequency.vue'
import DeviceCount from './components/DeviceCount.vue'
import CameraVideo from './components/CameraVideo.vue'
import AlarmCount from './components/AlarmCount.vue'
import { getDeviceCount } from '@/api/fjgs/statistic.js'
import { DEVICE_TYPES } from './components/DEVICE_TYPES'

export default {
  components: {
    // ScrollNum,
    // CostChart,
    // ProgressChart,
    // BarChart,
    // Top10Chart,
    MonthlyChart,
    // LineChart,
    //
    co2,
    FjFrequency,
    DeviceCount,
    CameraVideo,
    AlarmCount
  },
  data() {
    return {
      DEVICE_TYPES,

      queryParams: {
        date: [],
        active: 1
      },
      statistic1: [],
      statistic2: [],
      statistic3: [],
      statistic4: [],
      statistic6: [],
      statistic7: [],
      // 0全部，1风机、2灯组，3指示灯，4摄像机，5火灾报警器，6ups
      deviceCount: {
        '0': {},
        '1': {},
        '2': {},
        '3': {},
        '4': {},
        '5': {},
        '6': {}
      }
    }
  },
  computed: {
  },
  watch: {
    queryParams: {
      handler: 'getData',
      deep: true
    //   immediate: true
    }
  },
  created() {
    // this.nowYear()
    getDeviceCount().then(res => {
      // [
      //   {normal: 1, total: 2, fault: 1, equ_type: 1},
      //   ...
      // ]
      // =====>
      // {
      //   [equ_type]:{normal: 1, total: 2, fault: 1, equ_type: 1},
      //   ...
      // }
      console.log(res.data)
      res.data.forEach(e => {
        this.deviceCount[e.equ_type] = e
      })
    })
  },
  methods: {
    datePickerChange() {
      this.getData()
      this.queryParams.active = ''
    },
    getData() {
      const { date } = this.queryParams
      const parms = {
        startTime: date[0],
        endTime: date[1]
      }
    }
    // nowYear() {
    //   const date = new Date()
    //   const year = date.getFullYear()
    //   const month = date.getMonth() + 1
    //   const day = new Date().getDate()
    //   this.queryParams.date = [
    //     year + '-1-1',
    //     `${year}-${month}-${day}`
    //   ]
    //   this.active = 'year'
    //   this.getData()
    // },
    // now30Day() {
    //   const date = new Date()
    //   const year = date.getFullYear()
    //   const month = date.getMonth() + 1
    //   const day = new Date().getDate()
    //   const thirtyDate = new Date(Date.now() - 30 * 3600 * 24 * 1000) // 最近30天
    //   const thirtyYear = thirtyDate.getFullYear()
    //   const thirtyMonth = thirtyDate.getMonth() + 1
    //   const thirtyDay = thirtyDate.getDate()
    //   this.queryParams.date = [
    //     `${thirtyYear}-${thirtyMonth}-${thirtyDay}`,
    //     `${year}-${month}-${day}`
    //   ]
    //   this.active = '30day'
    //   this.getData()
    // }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
    // background-image: url('~@/assets/images/jd_stat/BG@2x.webp');
    background-size: cover;
    height: 100%;
    padding: 16px;
    overflow-y: scroll;
    // padding-bottom: 1.5625vw;
    // overflow-y: scroll;
}
.panel-1 {
  background-image: url('~@/assets/images/statistics/bg.png');
  background-size: cover;
}
.panel-2 {
  background-image: url('~@/assets/images/statistics/bg2.png');
  background-size: cover;
}
.panel-1,.panel-2,.panel-3 {
  border-radius: 2px;
  padding: 1.0417vw;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8333vw;font-weight: 500;
    line-height: 1;
    .sub_tit {
      font-size: 0.7292vw;
      color: rgba(0,0,0,0.65);
    }
  }
}
.panel-3 {
  .panel-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows:repeat(2, 5.4167vw);
    column-gap:0.9375vw;
    row-gap: 0.9375vw;
    padding-top: 0.9375vw;
  }
}
.tabs {
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-right: 2.5vw;
    border-bottom: 2px solid transparent;
    &.active {
      border-bottom-color: #1890FF;
      color: #1890FF;
    }
  }
}
</style>
